<template>
  <div class="detail">
    <!-- 轮播图 -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banners" :key="item.id">
                <img :src="item.url" alt="" style="width: 375px;height: 375px;">
            </van-swipe-item>
        </van-swipe> -->
    <!-- <Top></Top> -->

    <img :src="recommendList.imgurl" style="width: 100%; height: 220px" />
    <!-- 内容区域 -->
    <div class="my-text">
      <p>
        <span
          style="
            color: red;
            margin-right: 10px;
            font-weight: bold;
            font-size: 18px;
          "
          >￥{{ recommendList.price }}</span
        >
        <del style="color: #ccc"
          ><em>原价：￥{{ recommendList.nowprice }}</em></del
        >
      </p>
      <p style="font-weight: bold">{{ recommendList.title }}</p>
      <van-text-ellipsis
        :content="recommendList.desc"
        style="color: #666; font-size: 14px"
      />
    </div>
    <van-tabs
      :v-model:active="active"
      @click-tab="onClickTab"
      style="margin-bottom: 50px"
    >
      <van-tab title="商品介绍">
        <img
          :src="item.url"
          v-for="item in banners"
          :key="item.id"
          style="width: 363px; height: 363px; margin-left: 5px"
        />
      </van-tab>
      <van-tab title="售后保障">{{ detaildatalist.acount }}</van-tab>
    </van-tabs>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="detaildatalist.acount ?? 0"
        @click="$router.push('/cart')"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addcartFn"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="$router.push('/cart')"
      />
    </van-action-bar>
  </div>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";
import { mapState, mapMutations } from "vuex";
export default {
  name: "details",
  data() {
    return {
      categoryid: 0,
      id: 0,
      recommendList: [],
      detaildatalist: [],
    };
  },
  async created() {
    const categoryid = this.$route.query.categoryid;
    const id = this.$route.query.id;
    this.categoryid = categoryid;
    this.id = id;
    if (categoryid) {
      console.log(1);
      const result = await request.get(
        "/good/categorylist?categoryid=" + categoryid
      );
      const result1 = await request.get(
        "/good/detaildata?shopid=" + categoryid
      );
      if (result.data.code === 200) {
        this.recommendList = result.data.categorydatalist;
      }
      if (result1.data.code === 200) {
        this.detaildatalist = result1.data.cartdatalist;
      }
    }
    if (id) {
      const result = await request.get("/good/categorylist?id=" + id);
      // const result1 = await request.get("/good/detaildata?shopid=" + id);
      if (result.data.code === 200) {
        console.log(result.data.categorydatalist);
        this.recommendList = result.data.categorydatalist;
      }
      // if (result1.data.code === 200) {
      //   this.detaildatalist = result1.data.cartdatalist;
      // }
    }
  },
  methods: {
    ...mapMutations(["addcart"]),
    // 加入购物车
    async addcartFn() {
      this.addcart(this.recommendList);
      // 获取数据
      const recommenddata = JSON.parse(localStorage.getItem("cartList"));
      if (recommenddata) {
        const data = recommenddata.find((item) => item.id == this.categoryid);
        const data1 = recommenddata.find((item) => item.id == this.id);
        if (data) {
          await request.post("/good/addcart", data);
        }
        if (data1) {
          await request.post("/good/addcart", data1);
        }
        // 更新商品数目
        const categoryid = this.$route.query.categoryid;
        const id = this.$route.query.id;
        if (categoryid) {
          const result1 = await request.get(
            "/good/detaildata?shopid=" + categoryid
          );
          this.detaildatalist = result1.data.cartdatalist;
        }
        if (id) {
          console.log(id);
          const result1 = await request.get("/good/detaildata?shopid=" + id);
          this.detaildatalist = result1.data.cartdatalist;
        }
      }
    },
  },
};
</script>

<style lang="scss">
.detail {
  .my-text {
    width: 97%;
    height: 120px;
    background-color: #fff;
    margin: 10px auto;
    padding: 5px;
  }
}
:deep(.van-nav-bar__text) {
  color: #333;
}
:deep(.van-icon-arrow-left:before) {
  color: #333;
}
</style>
